<template>
  <div class="map" id="map"></div>
</template>
<script setup>
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { onMounted } from 'vue';
import './utils/Leaflet.canvaslabel'

import { createCanvasShip } from './utils/L.CanvasShip'
import vueSVG from './assets/run.svg'
onMounted(() => {
  
  // //矢量文本标签渲染器
  var canvasLabel = new L.CanvasLabel({
    defaultLabelStyle: {
      collisionFlg: true,
      scale: 1,
      // strokeStyle: "white",
      strokeStyle: "#fff",
      fillStyle: "rgba(0,0,0,1)",
      lineWidth:3,
      
    }
  })
  window.map = L.map('map', {
    center: [22, 113], // 地图中心
    crs: L.CRS.EPSG4326,
    zoom: 6,
    minZoom: 1,
    maxZoom: 15,
    //限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
    renderer : canvasLabel,
    contextmenu: true, //右键菜单
    logoControl: false, // 隐藏logo版权
    zoomControl: false, // 缩放控件
    attributionControl: false // 隐藏文字版权
  })
  addLayer()
  init()
  // addMarker()

})

function addMarker() {
  let myIcon= L.icon({
      iconUrl: vueSVG,
      iconSize: 40
  });
  L.marker([23,113], {icon: myIcon}).addTo(map);
}
let type = ['base',]
function init() {
  let latlngs = []
  for (let i = 0; i < 1; i++) {
    let d = getRandomLatLng(map)
    let t = type[Math.floor(Math.random() * type.length)]
    latlngs.push({
      lat: d.lat, lng: d.lng, deg: Math.random()*360, type: t, color: 'yellow'
    })
    let label = L.circleMarker(d,
      {
        color: 'transparent',
        fillColor: 'transparent',
        // opacity: 0,
        radius: 0,
        labelStyle: {
          rotation: 0,
          minZoom: 4,
          defaultHeight: 0,
          text: '船' + i,
          offsetX: 20,
          offsetY: 20,
        }
      }
    ).addTo(map)
  }
  const ship = createCanvasShip({
    latlngs,
    // latlngs: json,
    zIndex: "0",
    events: {
      click(point, source) {
        console.log(point, source, "click");
      },
      contextmenu(point, source) {
        console.log(point, source, "contextmenu");
      }
      // mousemove(point) {
      //   console.log(point, "point");
      // },
    },
  })
  .addTo(map);

}

//生成随机点
const getRandomLatLng = map => {
  let bounds = map.getBounds(),
    southWest = bounds.getSouthWest(),
    northEast = bounds.getNorthEast(),
    lngSpan = northEast.lng - southWest.lng,
    latSpan = northEast.lat - southWest.lat;

  return L.latLng(
    southWest.lat + latSpan * Math.random(),
    southWest.lng + lngSpan * Math.random()
  );
}


function addLayer() {
  // 矢量图+注记
  let mapTypes = ['vec_c', 'cva_c'];
  // 天地图 token
  let tdtToken = 'ce62df9dd155c78d0d3a96652168cc71';
  let layers = [];
  for (let i = 0, len = mapTypes.length; i < len; i++) {
    let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
    let layer = L.tileLayer(tdtUrl, {
      zoomOffset: 1,// 注意如果是 web 墨卡托投影(EPSG:3857) 请改为 0
      noWrap: true,
      bounds: [[-90, -180], [90, 180]]
    });
    layers.push(layer);
  }
  // LayerGroup 对象
  let tdtLayerGroup = L.layerGroup(layers).addTo(map);
  // 获取地图 id，可用于获取地图对象
  let leafletId = tdtLayerGroup._leaflet_id;
} 
</script>

<style>
.map {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
